<!-- 登录 -->
<template>
  <div class="background-container" id="defaultImages">
    <div class="login-container">
      <h5 class="login-title">天问二号数据管理软件</h5>
      <el-tabs v-model="activeName" style="margin-left: 108px; margin-top: 0px;">
        <!-- 登录 -->
        <el-tab-pane label="登录" name="first" class="login-pane">
          <el-form :model="loginForm" ref="loginForm" :rules="loginRules" style="display: flex; flex-direction: column">
            <el-form-item label="账号" prop="username">
              <el-input style="width: 70%" placeholder="请输入账号" prefix-icon="el-icon-user-solid"
                v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input style="width: 70%" show-password @keyup.enter.native="loginUser" placeholder="请输入密码"
                prefix-icon="el-icon-lock" v-model="loginForm.password"></el-input>
            </el-form-item>
          </el-form>
          <div style="display: flex; flex-direction: column">
            <el-button style="margin-top: 30px;width: 70%;border-radius: 25px;background-color: #137CFC;border: none;"
              type="primary" @click="loginUser('loginForm')">登录</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import config from "@/utils/config";
const { ip } = config;
import { setToken } from "../utils/auth";

export default {
  data() {
    return {
      activeName: 'first',
      // 登录表单
      loginForm: {
        username: '',
        password: ''
      },
      // 注册表单
      registerForm: {
        username: '',
        name: '',
        organization: '',
        password: '',
        confirmPassword: '',
        IDcard: '',
        phone: '',
        email: '',
      },
      //登录校验
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: '请输入账号' }
        ],
        password: [
          { required: true, trigger: "blur", message: '请输入密码' }
        ],
      },
      // 单位
      organizationOptions: [{
        value: '1',
        label: '单位1'
      }, {
        value: '2',
        label: '单位2'
      },],
    };
  },
  created() {
    // 获取重定向URL
    const redirectUrl = this.$route.query.redirect || '/home';
    this.redirectUrl = redirectUrl;
  },
  methods: {
    // 登录
    loginUser(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: ip + '/-/bin.user_operate.login',
            data: JSON.stringify({
              user: this.loginForm.username,//admin
              pwd: this.loginForm.password,//111111
            }),
          }).then(res => {
            if (res.data.code == '200') {
              // 使用auth工具存储token
              setToken(res.data.token);
              
              // 如果有重定向URL，跳转到该URL，否则跳转到首页
              this.$router.push(this.redirectUrl);
              
              this.$message({
                message: '登录成功',
                type: 'success',
                showClose: true,
              });
            } else {
              this.$message({
                message: res.data.msg ? res.data.msg : '系统异常',
                type: 'warning'
              });
            }
          }).catch(error => {
            console.error('登录请求失败:', error);
            this.$message({
              message: '登录失败，请检查网络连接',
              type: 'error'
            });
          });
        } else {
          return false;
        }
      })
    },
  }
}
</script>

<style scoped>
/* 语言切换单选框小圆点 */
#defaultImages .el-radio__input {
  display: none !important;
}

.login-container {
  width: 500px;
  height: 500px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.85);
}

.login-title {
  font-size: 21px;
  font-weight: 600;
  font-family: 宋体, serif;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-group button {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.background-container {
  width: 100%;
  height: 100vh;
  /* background-image: url('../assets/bak.png'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}

/* 去除el_tabs下划线*/
.login-container>>>.el-tabs__nav-wrap::after {
  position: static !important;
}

/* el_tab-pane 选中下划线颜色*/
.login-container>>>.el-tabs__active-bar {
  background-color: #324F9F;
}

/* 鼠标选中时样式 */
.login-container>>>.el-tabs__item.is-active {
  color: #000000;
  opacity: 1;
}

/* 鼠标悬浮时样式 */
.login-container>>>.el-tabs__item:hover {
  color: #137CFC;
  cursor: pointer;
  opacity: 1;
}

/* 未选中时字体颜色 */
.login-container>>>.el-tabs__item {
  color: #999999;
  opacity: 0.5;
}

/*表单标签位置*/
.login-pane>>>.el-form-item__label {
  float: none;
}
</style>
